<template>
  <div>
    <div class="order" v-if="!$route.query.orderId">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>挂号订单</span>
          </div>
        </template>
        <div class="text item">
          <el-form :inline="true">
            <el-form-item label="就诊人">
              <el-select placeholder="请选择就诊人" v-model="patientId" @change="getOrderInfo">
                <el-option label="全部就诊人" value=""></el-option>
                <el-option v-for="(item,index) in allUser" :label="item.name" :key="item.id" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="getOrderInfo">
                <el-option label="全部订单" value=""></el-option>
                <el-option v-for="(item,index) in allOrderStatus" :key="index" :label="item.comment" :value="item.status"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-table stripe :data="allOrderArr">
            <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
            <el-table-column label="医院" prop="hosname"></el-table-column>
            <el-table-column label="科室" prop="depname"></el-table-column>
            <el-table-column label="医生" prop="title"></el-table-column>
            <el-table-column label="服务费" prop="amount"></el-table-column>
            <el-table-column label="就诊人" prop="patientName"></el-table-column>
            <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" @click="goOrderDetail(scope)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="limit"
              layout="prev, pager, next,total,jumper"
              :total="total"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <OrderDetail v-else/>
  </div>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import OrderDetail from "@/pages/User/OrderDetail.vue";
import {onMounted, ref} from "vue";
import {reqAllUser, reqOrderState, reqUserOrderInfo} from "@/api/user";

let $route = useRoute();
let $router = useRouter();
let pageNo = ref<number>(1);
let limit = ref<number>(10);
let patientId = ref<string>('');
let orderStatus = ref<string>('');
let allOrderArr = ref([]);
let total = ref<number>(0);
let allUser = ref([]); //全部就诊人信息(用于下拉选项)
let allOrderStatus = ref([]); //全部订单状态信息(用于下拉选项)

// 请求订单数据
const getOrderInfo = async () => {
  let result =  await reqUserOrderInfo(pageNo.value,limit.value,patientId.value,orderStatus.value);
  allOrderArr.value = result.data.records;
  total.value = result.data.total;

}

// 点击详情按钮跳转到订单详情
const  goOrderDetail = ({row}:any) => {
  console.log(row.id);
  $router.push({path:'/user/orderDetail',query:{orderId:row.id}})
}

// 处理分页器页数变化
const  handleCurrentChange = (pager:number) => {
  pageNo.value = pager;
  getOrderInfo();
}
// 请求下拉选项所有就诊人信息
const getAllUser = async () => {
   let result =  await reqAllUser();
   allUser.value = result.data;
}
// 请求下拉选项所有订单状态信息
const getAllOrderStatus = async () => {
  let result =  await reqOrderState();
  allOrderStatus.value = result.data;
}

onMounted(() => {
  getOrderInfo();
  getAllUser();
  getAllOrderStatus();
})
</script>

<style scoped>

</style>